<!DOCTYPE html>
<html lang="zh" xml:lang="zh">
<head>
    <meta charset='utf-8'>
    <title>Map</title>
    <script type='text/javascript' src="../../ref/jquery-3.2.1.min.js"></script>
    <link rel="stylesheet" href="../../ref/ol.css" type="text/css">
    <script type='text/javascript' src="../../ref/ol.js"></script>
    <link rel="stylesheet" type="text/css" href="003.css">
</head>
<body>

<div class="right">
    <div class="index">
        <ul>
            <li id="indexButton1"><span>PM2.5</span></li>
            <li id="indexButton2">PM10</li>
            <li id="indexButton3">SO2</li>
            <li id="indexButton4">NO2</li>
            <li id="indexButton5">CO</li>
            <li id="indexButton6">O3</li>

        </ul>
    </div>
    <!--toolbar-->
    <div class="select">
        <input id="sateButton1" class="select_btn" type="button" value="国控站点"></input>
        <input id="sateButton2" class="select_btn" type="button" value="省控站点"></input>
    </div>


    <div id="bt7">
        <input id="layerButton1" class="bt7_btn" type="button" value="卫星图"></input>
        <input id="layerButton2" class="bt7_btn" type="button" value="道路图"></input>
        <input id="layerButton3" class="bt7_btn" type="button" value="地形图"></input>
    </div>


    <!--地图及弹窗-->
    <div id="map" style="width:100%;height:100%;">

        <div id="popu" class="popu">
            <div id="popu-closer" class='popu-closer'>
                <div id="_close"></div>
            </div>
            <div id="popu-content">
                <div id="popuContent-title">
                    <h4>城市详情 :</h4>
                    <h2 id="popu-city"></h2>
                    <!--  <div id="popu_button">
                        <div id="popu_button_1"></div>
                        <div id="popu_button_2"></div>
                    </div>-->
                </div>
                <hr class="topline"></hr>
                <div id="popuContent-body">
                    <!--  <div id="popuContent-body-left">
                        <div id="weatherContent"></div>
                    </div>-->
                    <div id="popuContent-body-right">
                        <div class="popu-block popu-1">
                            <div id="_color8" class="popu-text">空气质量</div>
                            <p id="popu-8"></p>
                        </div>
                        <br/>
                        <br/>
                        <br/>
                        <div class="popu-block ">
                            <div id="_color1" class="popu-text">PM2.5</div>
                            <p id="popu-1"></p>
                        </div>

                        <div class="popu-block">
                            <div id="_color2" class="popu-text">PM10</div>
                            <p id="popu-2"></p>
                        </div>
                        <div class="popu-block">
                            <div id="_color3" class="popu-text">SO2</div>
                            <p id="popu-3"></p>
                        </div>
                        <div class="popu-block">
                            <div id="_color4" class="popu-text">NO2</div>
                            <p id="popu-4"></p>
                        </div>
                        <div class="popu-block">
                            <div id="_color5" class="popu-text">CO</div>
                            <p id="popu-5"></p>
                        </div>
                        <div class="popu-block">
                            <div id="_color6" class="popu-text">O3</div>
                            <p id="popu-6"></p>
                        </div>
                        <!-- <div  class="popu-block">
                            <div  id="_color7"  class="popu-text"></div>
                            <p id="popu-7"></p>
                            </div>
                         -->
                    </div>
                </div>
            </div>

        </div>
    </div>
</div>
<script type='text/javascript' src="003.js"></script>
</body>
</html>
